<template>
  <el-card>
    <el-button type="primary" @click="addCoupon">新增分佣设置</el-button>
    <el-table :data="tableData" stripe border style="margin-top: 20px">
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column prop="relate_coupon_name" label="关联券包">
      </el-table-column>
      <el-table-column prop="first" label="直推释放">
      </el-table-column>
      <el-table-column prop="second" label="间推释放">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="isBonusSet" :close-on-click-modal="true" width="60%">
      <el-form ref="form" :model="bonusSet" label-width="80px">
        <el-form-item label="名称">
          <el-input class="width400" v-model="bonusSet.name"></el-input>
        </el-form-item>
        <el-form-item label="关联券包">
          <vk-data-input-select v-model="bonusSet.relate_coupon_id" class="width400" :localdata='couponArr' @change="couponChange"
            :props="{value: '_id', label: 'name'}" placeholder="请选择"></vk-data-input-select>
        </el-form-item>
        <el-form-item label="直推释放">
          <el-input class="width400" type="number" v-model="bonusSet.first"></el-input>
        </el-form-item>
        <el-form-item label="间推释放">
          <el-input class="width400" type="number" v-model="bonusSet.second"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        bonusSet: {
          name: '',
          first: '',
          second: '',
          relate_coupon_id: '',
          relate_coupon_name: ''
        },
        currentPage: 1,
        pageNum: 1,
        pageSize: 100,
        total: 0,
        isBonusSet: false,
        tableData: [],
        couponArr: []
      }
    },
    mounted() {
      this.getList()
      this.getCouponAllget()
    },
    methods: {
      couponChange(val, formData) {
        this.bonusSet.relate_coupon_name = formData.name
      },
      preview(item) {
        this.url = item
        this.isPreview = true
      },
      addCoupon() {
        this.isBonusSet = true
        this.bonusSet = {
          name: '',
          first: '',
          second: '',
          relate_coupon_id: '',
          relate_coupon_name: ''
        }
      },
      getCouponAllget() {
        let that = this
        vk.callFunction({
          url: 'user/pub/couponAllget',
          success: (res) => {
            if (res) {
              that.couponArr = res.rows
            }
          }
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val
        this.getList()
      },
      handleEdit(index, row) {
        this.bonusSet = row
        this.isBonusSet = true
      },
      handleDelete(index, row) {
        vk.confirm('确定要删除该设置吗', '提示', '确定', '取消', res => {
          if (res.confirm) {
            this.bonusSetDelete(row)
          }
        });
      },
      bonusSetDelete(row) {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        vk.callFunction({
          url: 'user/kh/bonusSetDelete',
          data: {
            _id: row._id
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.getList()
            }
          }
        })
      },
      searchList() {
        this.pageNum = 1
        this.getList()
      },
      getList() {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        let obj = {}
        if (this.name) {
          obj.name = this.name
        }
        vk.callFunction({
          url: 'user/kh/bonusSetList',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ...obj
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.tableData = res.rows
              this.total = res.total
            }
          }
        })
      },
      onSubmit() {
        uni.showLoading({
          title: '加载中...'
        })
        this.bonusSet.first = parseFloat(this.bonusSet.first)
        this.bonusSet.second = parseFloat(this.bonusSet.second)
        vk.callFunction({
          url: 'user/kh/bonusSetPost',
          data: this.bonusSet,
          success: (res) => {
            if (res) {
              uni.hideLoading()
              console.log(res)
              this.isBonusSet = false
              this.getList()
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__new-tab {
    margin-right: 12px !important
  }

  .width400 {
    width: 400px
  }

  .width200 {
    width: 200px
  }

  .width100 {
    width: 100px
  }

  .good {
    display: flex;
    align-items: center;
    margin-top: 10px;

    &-img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }

    &-name {
      margin-left: 10px;
    }

    &-price {
      color: #f56c6c;
      font-weight: 500;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>